<template>
  <div class="card">
    <el-row type="flex" justify="center">
      <el-col  :span="6">
        <div class="register">
          <h1>注册</h1>
          <el-form ref="form" v-model="form">
            <!--     手机号       -->
            <el-form-item>
              <el-input v-model="form.phone" prefix-icon="el-icon-user" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <!--   密码       -->
            <el-form-item>
              <el-input type="password" v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input type="password" v-model="form.checkPass" prefix-icon="el-icon-lock" placeholder="确认密码"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="24">
                <el-button type="primary" size="medium" style="width: 100%" round>注册</el-button>
              </el-col>
            </el-row>
          </el-form>
          <router-link to="/portrait" >人脸注册</router-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Register",
  data(){
    return{
      form:{
        phone:'',
        password:'',
        checkPass:''
      }
    }
  }
}
</script>

<style scoped>
.card{
  background: url("../static/img/img_1.png");
  width: 100%;
  height: 100%;
  position: fixed;
}
.register{
  margin-top: 50%;
  border-radius: 30px;
  background-color: aliceblue;
  padding: 20px;
}
h1{
  text-align: center;
}
.face_register{
  margin-top: 100px;
  margin-left: 10px;
}
</style>